<template>
	<div class="container">
		<h2>{{ id ? '修改' : '创建' }}价格维护</h2>
		<a-form ref="formRef" :model="formState" layout="vertical" @finish="savePrice">
			<a-row :gutter="20">
				<a-col :span="12">
					<a-form-item :name="['materials', index, 'source_id']" :rules="{required:true, message:'请选择材料名称'}">
						<a-tree-select v-model:value="formState.materials[record.key].source_id" :show-search="true" placeholder="请选择材料名称" allow-clear tree-default-expand-all :tree-data="materialOptions" tree-node-filter-prop="label" style="width:100%" @change="(id)=>changeMaterial(id, record)">
							<template #title="{label}">{{ label }}</template>
						</a-tree-select>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item :name="['materials', index, 'id']" :rules="{required:true, message:'请选择规格'}">
						<a-select v-model:value="formState.materials[record.key].id" :show-search="true" option-filter-prop="model" placeholder="请选择" :options="materialModelOptions[record.source_id] || []" allow-clear :field-names="{value:'id', label:'model'}" style="width:100%"></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="日期" name="add_date" :rules="{required:true, message:'请选择日期'}">
						<a-date-picker v-model:value="formState.add_date" style="width:100%" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="价格" name="price" :rules="{required:true, message:'请输入价格'}">
						<a-input v-model:value="formState.price" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="备注" name="memo">
						<a-textarea v-model:value="formState.memo" :auto-size="{minRows:4, maxRows:6}"></a-textarea>
					</a-form-item>
				</a-col>
			</a-row>

			<a-row :gutter="20">
				<a-col :span="24" class="py-4 text-center">
					<a-space>
						<a-button type="primary" html-type="submit">
							<save-outlined />提交
						</a-button>

						<a-button @click="closeTab('/price')">
							<close-outlined />关闭
						</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-form>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance, inject } from "vue";
import { SaveOutlined, CloseOutlined } from "@ant-design/icons-vue";
import { post, listToTree } from "../utils";
import { useRoute } from "vue-router";
const route = useRoute();
const id = computed(() => {
	return route.params.id || 0;
});
const formState = ref({});
const { proxy } = getCurrentInstance();
const unitOptions = ref([]);
const formRef = ref();
onMounted(() => {
	if (id.value) {
		post("price/info", { id: id.value }).then(data => {
			formState.value = data;
		});
	}
});

const savePrice = () => {
	formRef.value
		.validate()
		.then(() => {
			proxy.$message.destroy();
			const params = { ...formState.value };
			post("price/save", params)
				.then(() => {
					if (id.value) {
						proxy.$message.success("价格维护修改成功", 1);
					} else {
						proxy.$message.success("价格维护创建成功", 1);
					}

					closeTab("/Price");
				})
				.catch(err => {
					proxy.$message.error(err);
				});
		})
		.catch(err => {});
};

post("dictionary", { root_code: "MATERIAL_UNIT" }).then(data => {
	unitOptions.value = data;
});

const materialOptions = ref([]);

post("dictionary", { root_code: "MATERIAL_CATEGORY" }).then(data => {
	const { root_id: rootId } = data[0] || {};
	materialOptions.value = listToTree(data, rootId);

	//获取所有规格
	post("material", { source_id: data.map(d => d.id).join(","), page_size: 10000 }).then(({ data }) => {
		materialModelOptions.value = (() => {
			const array = [];
			data.forEach(d => {
				if (!array[d.source_id]) array[d.source_id] = [];

				if (d.attr) d.model = `${d.model}（${d.attr}）`;

				array[d.source_id].push(d);
			});

			return array;
		})(data);
	});
});

const materialModelOptions = ref({});

const changeMaterial = (id, record) => {
	//强制选择规格
	record.id = null;

	if (!id) return;

	post("material", { source_id: id, page_size: 10000 }).then(({ data }) => {
		materialModelOptions.value[id] = data.map(d => {
			if (d.attr) d.model = `${d.model}（${d.attr}）`;

			return d;
		});
	});
};

//调用父页面closeTab方法
/*
//父页面定义closeTab方法
provide("closeTab", path => {
	
});
*/
const closeTab = inject("closeTab");
</script>

<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;

	h2 {
		font-size: 16px;
		font-weight: 600;
		line-height: 30px;
		margin-bottom: 20px;
	}

	h3 {
		line-height: 40px;
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 20px;

		display: flex;
		align-items: center;

		&:before {
			content: "";
			display: block;
			width: 2px;
			height: 20px;
			background: rgb(24, 144, 255);
			margin-right: 10px;
		}
	}

	h4 {
		font-weight: 600;
		margin: 15px 0;
		line-height: 30px;
	}
}

:deep(.ant-table-cell) .ant-form-item {
	margin-bottom: 0;

	.ant-form-item-explain {
		position: absolute;
		bottom: -24px;
	}
}
</style>
